<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {Rule} from "ant-design-vue/es/form";
import SsoAppGroupApi from "@/api/SsoAppGroupApi";
import {message} from "ant-design-vue";
import {SsoAppGroup} from "@/types/entity";
import SsoAppApi from "@/api/SsoAppApi";
import {resetReactive} from "@/utils";
import router from "@/router";
let form = reactive<any>({});
const rules: Record<string, Rule[]> = {
  appName: [{ required: true, trigger: 'blur', message: '请输入' }],
  ssoAppGroupId: [{ required: true, trigger: 'blur', message: '请选择入' }],
  remark: [{ required: true, trigger: 'blur', message: '请选择入' }],
};
const showOpen = ref<boolean>(false);
const currentType=ref("");
const appGroup=ref([])
const formRef = ref();

const createApp=(type:string)=>{
  resetReactive(form);
  currentType.value=type
  form.appType=type
  showOpen.value=true
}

onMounted(()=>{
  SsoAppGroupApi.list(null).then(res=>{
    appGroup.value=res.data
      .map((i: SsoAppGroup) => {
        return {
          label: i.name,
          value: i.ssoAppGroupId,
        };
      });
  })
})

const formBtnLoading = ref(false);

function handleConfirm() {
  formRef.value
    .validate()
    .then(() => {
      formBtnLoading.value = true;
      SsoAppApi.save(form)
        .then((res) => {
          message.success('提交成功');
          showOpen.value = false;
          //跳转详细
          let ssoAppId = res.data[0].ssoAppId
          if (currentType.value==='OIDC'){
            router.push({ name: 'OidcCreate',   query: { ssoAppId: ssoAppId}  })
          }
          if (currentType.value==='JWT'){
            router.push({ name: 'JwtCreate',   query: { ssoAppId: ssoAppId}  })
          }
        })
        .finally(() => {
          formBtnLoading.value = false;
        });
    })
    .catch(() => {});
}

</script>

<template>
<div>
  <a-page-header
    style="border: 1px solid rgb(235, 237, 240)"
    title="创建应用"
    sub-title="应用模版"
    @back="() => null"
  >
    <div>
      本页面包含了所有已支持的可添加应用列表，管理员可以选择需要使用的应用进行初始化配置，并开始后续使用。应用分为两种：一种是支持标准的 OIDC、JWT、表单代填 等模板的应用，在这里可以通过添加对应的标准应用模板来实现单点登录功能。
    </div>
  </a-page-header>

  <div style="background-color: #ececec; padding: 20px">
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card title="OIDC" :bordered="false"  style="height: 220px;cursor: pointer" @click="createApp('OIDC')">
          <div class="key-item">
          <div>
            <svg t="1736842221232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4245" width="64" height="64"><path d="M326.32884 824.994414c18.776172 20.959447 28.164257 48.796213 28.164258 83.204639s-9.388086 61.633875-28.164258 82.898981c-19.71498 21.898256-46.612938 32.836468-80.388213 32.836468s-61.000725-11.265703-80.388214-33.163959c-18.776172-21.265106-27.836766-48.796213-27.836766-82.593322S146.776241 846.543346 165.552413 825.27824c19.387489-22.531406 46.307279-33.469618 80.388214-33.469618s60.695066 10.938212 80.388213 33.163959z m-135.756087 20.959447c-12.51017 15.326596-18.776172 35.980385-18.776171 62.245192s6.266001 46.612938 18.776171 61.939534c13.14332 15.632254 31.592 23.775873 55.367874 23.775873s42.224553-7.816127 55.062215-23.142723c12.51017-15.020937 19.08183-35.980385 19.08183-62.572684s-6.57166-47.857405-19.08183-63.184c-12.815829-15.632254-31.286342-23.142723-55.062215-23.142723s-42.224553 7.816127-55.367874 24.081531zM423.288117 796.218839v223.349111h-33.797109v-223.349111h33.797109zM549.044801 796.218839c35.980385 0 63.184001 10.021236 81.960173 30.347533 17.509872 18.776172 26.28664 45.979788 26.28664 81.327023s-9.060594 62.245192-26.897958 81.654513c-18.776172 20.020639-45.979788 30.041875-81.960172 30.041875h-80.715705V796.240672h81.327022z m-47.224254 194.267878h40.346936c28.164257 0 49.123705-6.877319 62.245192-20.326297 12.815829-13.448979 19.387489-34.102767 19.387489-62.245193s-6.57166-49.429363-19.081831-62.572683c-13.14332-13.448979-33.797109-20.020639-61.939533-20.020639h-40.980086v165.164812zM853.437109 812.178585c16.265404 13.14332 26.28664 31.286342 29.714383 53.817748h-33.163959c-3.755234-15.020937-10.960044-26.28664-21.592597-33.469618-10.632553-7.20481-23.775873-10.632553-40.041278-10.632553-24.081532 0-42.224553 8.121786-54.429065 24.714682-11.571362 15.020937-17.204213 35.652893-17.204213 61.633875s5.632851 47.551746 16.898555 62.245192c11.87702 15.632254 30.347533 23.470214 55.367873 23.470214 16.265404 0 30.041875-4.060893 40.674428-12.204511 11.265703-8.754936 19.08183-21.898256 23.470214-39.408128h33.163959c-4.999702 25.959149-16.571063 46.307279-35.041576 61.000725-17.204213 13.754637-37.858002 20.653789-61.939534 20.653789-36.591702 0-64.122809-11.87702-82.593322-35.041576-16.265404-20.020639-24.081532-46.918596-24.081531-80.715705s8.143619-60.061916 25.02034-81.021364c18.776172-23.775873 45.674129-35.347235 81.327022-35.347234 25.959149 0 47.551746 6.57166 64.450301 20.326297z" p-id="4246" fill="#1998fa"></path><path d="M246.093456 462.417807c0-82.440493 88.51-151.955993 209.376146-173.483092V215.074496C269.651002 238.173553 129.637527 340.241695 129.637527 462.6798s150.667861 232.104047 346.857021 249.854079v-73.445397c-131.498699-16.833056-230.401092-89.557972-230.401092-176.692507zM894.329864 410.128353l-18.033858-159.903117-56.917999 32.203317c-55.586201-33.906273-126.739158-57.987804-206.232229-67.594218v73.947551c45.477634 8.012622 86.370389 22.815232 119.774508 42.530212l-67.22306 38.032663 228.632638 40.783592z" p-id="4247" fill="#1998fa"></path><path d="M592.099 654.720737l-117.110913 57.834975V57.813142L592.099 0v654.720737z" p-id="4248" fill="#1998fa"></path></svg>
          </div>
          <div>OIDC是OpenID Connect的简称，OIDC=(Identity, Authentication) + OAuth 2.0。它在OAuth2上构建了一个身份层，是一个基于OAuth2协议的身份认证标准协议。OIDC是一个协议族，提供很多的标准协议，包括Core核心协议和一些扩展协议</div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="JWT" :bordered="false"  style="height: 220px;cursor: pointer" @click="createApp('JWT')">
          <div class="key-item">
          <div>
            <svg t="1736842361595" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7488" width="64" height="64"><path d="M298.666667 664.917333h85.219555v85.560889H298.723556v81.294222H426.666667v85.560889H213.333333v-166.855111H213.333333v-85.617778h0.113778v-178.631111A171.121778 171.121778 0 0 1 85.333333 320.512a170.837333 170.837333 0 0 1 170.552889-171.121778 170.837333 170.837333 0 0 1 170.609778 171.121778A171.121778 171.121778 0 0 1 298.666667 486.172444v178.744889zM256 406.072889c47.104 0 85.333333-38.286222 85.333333-85.560889s-38.229333-85.560889-85.333333-85.560889-85.333333 38.286222-85.333333 85.560889c0 47.217778 38.172444 85.560889 85.333333 85.560889zM520.533333 277.390222h409.6a8.533333 8.533333 0 0 1 8.533334 8.533334v196.266666a8.533333 8.533333 0 0 1-8.533334 8.533334h-409.6a8.533333 8.533333 0 0 1-8.533333-8.533334v-196.266666a8.533333 8.533333 0 0 1 8.533333-8.533334z m0 298.666667h409.6a8.533333 8.533333 0 0 1 8.533334 8.533333v196.266667a8.533333 8.533333 0 0 1-8.533334 8.533333h-409.6a8.533333 8.533333 0 0 1-8.533333-8.533333v-196.266667a8.533333 8.533333 0 0 1 8.533333-8.533333z" fill="#1998fa" p-id="7489"></path></svg>
          </div>
          <div>JWT（JSON Web Token）是在网络应用环境声明的一种基于 JSON 的开放标准。JWT 单点登录基于非对称加密，用户状态和信息使用私钥加密，传递给应用后，应用使用公钥解密并进行验证。使用场景非常广泛，集成简单。</div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>


  <a-modal v-model:open="showOpen" :mask-closable="false" title="应用创建">
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="{ span: 5 }"
      style="padding-top: 20px"
    >

      <a-form-item label="应用分组" name="ssoAppGroupId">
        <a-select
          v-model:value="form.ssoAppGroupId"
          show-search
          placeholder="请选择分组名字"
          option-filter-prop="label"
          :options="appGroup"
        />
      </a-form-item>

      <a-form-item label="应用名字" name="appName">
        <a-input v-model:value="form.appName" allow-clear placeholder="请输入应用名字" />
      </a-form-item>

      <a-form-item label="备注" name="remark">
        <a-input v-model:value="form.remark" allow-clear placeholder="请输入备注" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button type="primary" :loading="formBtnLoading" @click="handleConfirm">提交</a-button>
    </template>

  </a-modal>

</div>
</template>

<style scoped>

.key-item{
  display: flex;
  justify-content: space-between;
  >div:nth-child(1){
    margin-right: 20px;
  }
  >div:nth-child(2){
    height: 130px;
    overflow: hidden;
  }
}

</style>
